<template>
  <div class="startMain">
    <div class="starHeaderMain" v-resize="resize">
      <img src="@/assets/images/headerImg.png" alt="">
    </div>
    <div class="starBodyMain flex align-center justify-between" :style="{ height: `calc(100% - ${headerHeight})` }">
      <!-- left -->
      <div class="bodyLeftMain">
        <div class="leftOneMain cardBg">
          <div class="outer">
            <div class="inner">
              <Yjzs />
            </div>
          </div>
        </div>
        <div class="leftTwoMain cardBg">
          <div class="outer">
            <div class="inner">
              <Jxzxm />
            </div>
          </div>
        </div>
      </div>
      <!-- middle -->
      <div class="bodyMiddleMain">
        <div class="middleOneMain">
          <Map />
        </div>
        <div class="middleTwoMain cardBg noAfter">
          <div class="outer">
            <div class="inner" style="margin-top: 26px;">
              <div style="height: 100%;padding: 0 20px;">
                <Gshdsp />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- right -->
      <div class="bodyRightMain">
        <div class="rightOneMain cardBg">
          <div class="outer">
            <div class="inner">
              <Mydtj />
            </div>
          </div>
        </div>
        <div class="rightTwoMain cardBg">
          <div class="outer">
            <div class="inner">
              <Yjtj />
            </div>
          </div>
        </div>
        <div class="rightThreeMain cardBg">
          <div class="outer">
            <div class="inner">
              <Bmywtj />
            </div>
          </div>
        </div>
        <div class="rightFourMain cardBg">
          <div class="outer">
            <div class="inner">
              <Yjzs2 />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Yjzs from './model/yjzs'
import Jxzxm from './model/jxzxm'
import Mydtj from './model/mydtj'
import Map from './model/map'
import Gshdsp from './model/gshdsp'
import Yjtj from './model/yjtj'
import Bmywtj from './model/bmywtj'
import Yjzs2 from './model/yjzs2'
export default {
  components: { Yjzs, Jxzxm, Map, Mydtj, Yjtj, Bmywtj, Yjzs2, Gshdsp },
  computed: {
  },
  data() {
    return {
      headerHeight: '120px'
    }
  },
  mounted() {
    this.$nextTick(() => {
    })
  },
  methods: {
    resize(width, height) { // 实时监听高度和宽度的变化
      this.headerHeight = height
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/globalVariable.scss';

.startMain {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  background: url('../../assets/images/bodyBgImg.jpg') no-repeat center center;
  background-size: cover;
}

.starHeaderMain {
  img {
    width: 100%;
    display: block;
  }
}

.starBodyMain {
  padding: 10px 56px 60px;
  overflow-y: scroll;

  .bodyLeftMain {
    width: 533px;
    height: 100%;

    .leftOneMain {
      height: 429px;
      margin-bottom: 30px;
      position: relative;
      &::before{
        content: '业绩走势';
        font-size: 18px;
        font-weight: bold;
        color: #54DEF8;
        line-height: 20px;
        position: absolute;
        left: 10px;
        top: -8px;
        z-index: 9;
      }
    }

    .leftTwoMain {
      height: 440px;
      position: relative;
      &::before{
        content: '进行中项目';
        font-size: 18px;
        font-weight: bold;
        color: #54DEF8;
        line-height: 20px;
        position: absolute;
        left: 10px;
        top: -8px;
        z-index: 9;
      }
    }
  }

  .bodyMiddleMain {
    width: 666px;
    height: 100%;

    .middleOneMain {
      height: 429px;
      padding:40px 20px 20px;
      box-sizing: border-box;
      margin-bottom: 30px;
    }

    .middleTwoMain {
      height: 440px;
      position: relative;
      &::before{
        content: '公司活动视频';
        font-size: 18px;
        font-weight: bold;
        color: #54DEF8;
        line-height: 20px;
        position: absolute;
        left: 10px;
        top: -8px;
        z-index: 9;
      }
    }
  }

  .bodyRightMain {
    width: 533px;
    height: 100%;

    .rightOneMain {
      height: 109px;
      margin-bottom: 30px;
      position: relative;
      &::before{
        content: '满意度统计';
        font-size: 18px;
        font-weight: bold;
        color: #54DEF8;
        line-height: 20px;
        position: absolute;
        left: 10px;
        top: -8px;
        z-index: 9;
      }
    }

    .rightTwoMain {
      height: 290px;
      margin-bottom: 30px;
      position: relative;
      &::before{
        content: '业类统计';
        font-size: 18px;
        font-weight: bold;
        color: #54DEF8;
        line-height: 20px;
        position: absolute;
        left: 10px;
        top: -8px;
        z-index: 9;
      }
    }

    .rightThreeMain {
      height: 230px;
      margin-bottom: 30px;
      position: relative;
      &::before{
        content: '部门业务统计';
        font-size: 18px;
        font-weight: bold;
        color: #54DEF8;
        line-height: 20px;
        position: absolute;
        left: 10px;
        top: -8px;
        z-index: 9;
      }
    }

    .rightFourMain {
      height: 180px;
      position: relative;
      &::before{
        content: '业绩走势';
        font-size: 18px;
        font-weight: bold;
        color: #54DEF8;
        line-height: 20px;
        position: absolute;
        left: 10px;
        top: -8px;
        z-index: 9;
      }
    }
  }
}

.cardBg {
  background-image: url('~@/assets/images/cardBgHeaderImg.png'), url('~@/assets/images/cardBgFooterImg.png');
  background-size: 100% auto, 100% auto;
  background-position: center top, center bottom;
  background-repeat: no-repeat, no-repeat;
  position: relative;
  &::after{
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    box-shadow: 0 0 100px #12387C inset;
    pointer-events: none;
  }
  &.noAfter::after{
    display: none;
  }
  .outer {
    height: 100%;
    padding-top: 1px;
    .inner {
      height: calc(100% - 50px);
      background-image: url('~@/assets/images/cardBgBodyImg.png');
      background-repeat: repeat-y;
      background-size: 100% auto;
      margin-top: 30px;
    }
  }
}
</style>
